<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Grid Edit Controls Bidi Test</title>
	<style type="text/css">
		@import "../../resources/Grid.css";
		@import "../../resources/tundraGrid.css";
		@import "../../../../dojo/resources/dojo.css";
		@import "../../../../dijit/themes/tundra/tundra.css";
		@import "../../../../dijit/themes/tundra/tundra_rtl.css";
		@import "../../../../dijit/tests/css/dijitTests.css";
		#controls button {
			margin-left: 10px;
		}
		#grid {
			width: 450px;
			height: 150px;
			border: 1px solid silver;
		}
		</style>

	<script type="text/javascript" src="../../../../dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true, mblAlwaysHideAddressBar: true, has: {'dojo-bidi': true}"></script>
	
	<script type="text/javascript">
		require([
			"dojo/ready",
			"dijit/registry",
			"doh/runner",
			"dojo/dom",
			"dojo/query",
			"dojo/data/ItemFileWriteStore",
			"dojo/parser",			
			"dojox/grid/cells/dijit",
			"dijit/form/ComboBox"
		], function(ready, registry, runner, dom, query, ItemFileWriteStore){
			data = {identifier: 'id',label: 'id',items: []};
			data_list = [
				{ col1: "First!", col2: "First!", col3: "First!", col4: "First!"},
				{ col1: "Second!", col2: "Second!", col3: "Second!", col4: "Second!"},
				{ col1: "Third!", col2: "Third!", col3: "Third!", col4: "Third!"},
				{ col1: "Forth!", col2: "Forth!", col3: "Forth!", col4: "Forth!"}
			];
			for(var i=0; i < 4; i++){
				data.items.push(dojo.mixin({ id: i }, data_list[i]));
			}
			test_store = new ItemFileWriteStore({data: data});	
			gridLayout = [{
				defaultCell: { width: 8, editable: true, alwaysEditing: true, type: dojox.grid.cells._Widget, styles: 'text-align: right;'  },
				rows: [
					{ name: 'Input!', field: 'col1'},
					{ name: 'grid.cells.ComboBox!', styles: 'text-align: center;', field: 'col2', 
						type: dojox.grid.cells.ComboBox,
						options: ["First!", "Second!", "Third!", "Forth!"], width: 10},
					{ name: 'grid.cells.Select!', field: 'col3', styles: 'text-align: center;', 
						type: dojox.grid.cells.Select, options: [ "First!", "Second!", "Third!", "Forth!"]},
					{ name: 'dijit.form.Combo!', field: 'col4',
						widgetClass: dijit.form.ComboBox, width: 10}
				]
			}];
		
			ready(function(){	
				runner.register("grid.tests.bidi.test_EditControls", [
					{
						name: "Grid EditControls, Bidi",						
						runTest: function(){
							query("th.dojoxGridCell").forEach(function(node, index, arr){
								runner.is("rtl", node.style.direction, "header should have 'direction' style corresponding to 'textDir'");							
							});						
							var element = registry.byId('dijit_form_TextBox_0');
							if(element) {					
								runner.is("rtl", element.get("textDir"), "widget 'textDir' property should coinside with that of grid");
							}							
							element = registry.byId('dijit_form_ComboBox_0');
							if(element) {							
								runner.is("rtl", element.get("textDir"), "widget 'textDir' property should coinside with that of grid");
							}
							element = registry.byId('dijit_form_ComboBox_1');
							if(element) {
								runner.is("rtl", element.get("textDir"), "widget 'textDir' property should coinside with that of grid");
							}								
						}					
					}
				]);					

				runner.register("log", function(){
					dom.byId('failures').innerHTML = runner._failureCount;
					dom.byId('errors').innerHTML = runner._errorCount;
				});
				setTimeout(function(){runner.run();},2000);				
			});	
		},				
		addRow = function(){		
			test_store.newItem({
				id: dijit.registry.byId("grid").rowCount,
				col1: 'new!',
				col2: 'new!',
				col3: 'new!',
				col4: 'new!'
			});
		},
		toggleAlwaysEditing = function(){
			var grid = dijit.registry.byId("grid");
			gridLayout[0].defaultCell.alwaysEditing = !gridLayout[0].defaultCell.alwaysEditing;
			grid.set('structure', gridLayout);
		}		
		);	
	</script>
</head>
<body class="tundra">
	<h1>Grid Edit Controls Bidi Test</h1>
    <br />
	<div id="controls">
	<button dojoType="dijit.form.Button" onclick="addRow()">Add Row</button>
	<button dojoType="dijit.form.Button" onclick="toggleAlwaysEditing()">Toggle 'alwaysEditing'</button>	
	</div>	
    <br />	
	<div id="grid" data-dojo-id="grid" data-dojo-type="dojox/grid/DataGrid"
		data-dojo-props='textDir: "rtl", store:test_store, rowSelector:"20px", structure:gridLayout, escapeHTMLInData:"false" ' ></div>
	<br />
	<div id="rowCount"></div>

	<br>Errors:&nbsp;<span id="errors">?</span>
	<br>Failures:&nbsp;<span id="failures">?</span>		
</body>
</html>
